<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>for指令</title>
    <style>
        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        nav {
            width: 1000px;
            height: 60px;
            margin: 0 auto;
        }

        nav>ul {
            width: 1000px;
        }

        nav>ul>li {
            padding: 20px 30px;
            float: left;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- <div>
            <nav>
                <ul>
                    <li v-for="m in menu">
                        <a :href="m.url">{{m.title}}</a>
                    </li>
                </ul>
            </nav>
        </div> -->


        <div>
            <ul style="padding:0 0 0 50px">
                <li v-for="(p, i) in Class">
                    {{i+1}}、 姓名：{{p.name}}, 年龄:{{p.age}}, 性别：{{p.sex}}
                </li>
            </ul>
        </div>

        <div>
            <ul>
                <li v-for="(value, key, index) in car">
                    {{index+1}}、 {{key}}:{{value}}
                </li>
            </ul>
        </div>

        <div>
            <ul>
                <li v-for="(p, i) in Class" :key="'list_'+i">
                    {{i+1}}、 {{p.name}}， 请输入它的成绩 <input type="text"> <button>确认</button>
                </li>
            </ul>
        </div>

        <div>
            <h3>
                已成年的学生
            </h3>
            <ul style="padding:0 0 0 50px" v-if="Class.length">
                <li v-for="(p, i) in Class" v-show="p.age >= 18" :key="p.name">
                    {{i+1}}、 姓名：{{p.name}}, 年龄:{{p.age}}, 性别：{{p.sex}}
                </li>
            </ul>
            <h4 v-else>
                无数据
            </h4>
        </div>
    </div>
</body>
<script src=" https://cdn.jsdelivr.net/npm/vue@2.6.14">
</script>
<script>
    // 实例化Vue对象
    let app = new Vue({
        el: '#app',         // Vue对象在页面中的作用容器
        // 当前Vue对象设置的默认数据
        data: {
            menu: [
                { title: '首页', url: 'index.html' },
                { title: '用户中心', url: 'user.html' },
                { title: '商品列表', url: 'goods.html' },
                { title: '关于我们', url: 'aboutUs.html' },
                { title: '测试中心', url: 'test.html' },
                { title: '登录', url: 'login.html' },
            ],
            Class: [
                { name: '小明', age: 18, sex: '男' },
                { name: '小红', age: 17, sex: '女' },
                { name: '小军', age: 22, sex: '男' },
                { name: '小胡', age: 18, sex: '男' },
            ],
            car: {
                name: '库里南',
                car_number: '粤A 888888',
                price: 10000000
            }
        }

    })


</script>

</html>